<template>
	<div class="area">
		<el-cascader :options="areaList" @change="handleChange" clearable filterable ref="cascader" v-bind="$attrs" v-on="$listeners"></el-cascader>
	</div>
</template>
<script>
import AreaList from './areaList'
// import _ from 'lodash'
/**
 * @description 将areaList数据转化为[{label:'',value:'',children:[]}]形式的数据
 * @version 1.0.0
 * @author Yangx
 * @param { Object } area - 省市区源数据对象 {province_list：{},city_list：{},county_list:{}} province_list:省数据  city_list：市数据  county_list：区数据
 * @param { Number } level - 开始层级，第一级省
 * @param { Number } maxLevel - 结束层级，默认区数据结束
 * @param { String } code - 省市区的code，只显示对应code的省市区数据
 * @param { String } keys - 父级code，初始化不用传，该参数用于递归时做逻辑判断
 * @returns {Array} 返回一个数组[{label:'',value:'',children:[]}]
 */
function setOptions(area, level = 0, maxLevel = 2, code, keys) {
	const nameList = Object.keys(area)
	const max = Math.max(nameList.length, maxLevel)
	if (level >= max) return []
	const name = nameList[level]
	const arr = []
	for (const key in area[name]) {
		if (Object.hasOwnProperty.call(area[[name]], key)) {
			const element = area[name][key]
			if (code) {
				// 如果传了省的code，则取对应code的数据
				if (code === key) {
					const item = {
						value: key,
						label: element
					}
					const child = setOptions(area, level + 1, maxLevel, null, key)
					if (child.length) {
						item.children = child
					}
					arr.push(item)
					break
				}
			} else {
				// 如果没有传取所有省的数据
				if (keys) {
					// 注意这里的substring方法第二个参数取的key是下标+1，也就是传递的是level * 2，实际取的是level * 2+1的字符
					const activeCode = String(keys).substring(0, level * 2)
					const keyCode = String(key).substring(0, level * 2)
					if (activeCode === keyCode) {
						const item = {
							value: key,
							label: element
						}
						const child = setOptions(area, level + 1, maxLevel, null, key)
						if (child.length) {
							item.children = child
						}
						arr.push(item)
					}
				} else {
					const item = {
						value: key,
						label: element
					}
					const child = setOptions(area, level + 1, maxLevel, null, key)
					if (child.length) {
						item.children = child
					}
					arr.push(item)
				}
			}
		}
	}
	return arr
}
export default {
	props: {
		/**
		 * 显示列数，3-省市区，2-省市，1-省
		 */
		columnsNum: {
			type: Number,
			default: 3,
			validator(val) {
				return [1, 2, 3].includes(val)
			}
		},
		/**
		 * 省的code, 如果需要只显示一个省，则需要传入这个省的code
		 * 目前显示的逻辑是columnsNum：3-省市区，2-省市，1-省，不存在显示市区或单独显示区的业务，
		 * 所以这里无法单独传市的code或区的code，
		 * 如存在这样的业务则重写下方的setAreaList方法的setOptions第二个参数0
		 */
		code: {
			type: String
		},
		/**
		 * 省市区的数据
		 */
		area: {
			type: Array,
			default: function () {
				return []
			}
		}
	},
	data() {
		return {
			areaList: []
		}
	},
	watch: {
		area() {
			this.setAreaList()
		},
		code() {
			this.setAreaList()
		},
		columnsNum() {
			this.setAreaList()
		}
	},
	created() {
		this.setAreaList()
	},
	methods: {
		setAreaList() {
			console.log(this.code)
			// 目前只支持显示3列数据，3-省市区，2-省市，1-省，如果存在单独显示市区或者区的逻辑，请重写下方setOptions第二个参数0
			this.areaList = this.area.length ? this.area : setOptions(AreaList, 0, this.columnsNum - 1, this.code)
			console.log(this.areaList)
		},
		handleChange(val) {
			const node = this.$refs.cascader.getCheckedNodes()
			this.$emit('areaChange', node[0].pathLabels)
		}
	}
}
</script>
<style lang="scss" scoped>
.area {
}
</style>
